<template>
  <div>
    <div style="text-align:left;display: flex">
      <el-tag type="info" size="large">患者信息：</el-tag>
      <el-tag size="large">姓名：{{patient.realName}}</el-tag>
      <el-tag size="large">病历号：{{patient.caseNumber}}</el-tag>
      <el-tag size="large">年龄：{{patient.age}}</el-tag>
      <el-tag size="large">性别：{{patient.gender}}</el-tag>
      <el-input placeholder="输入病历号" style="width: 200px" v-model="patient.caseNumber"></el-input>
      <el-input placeholder="输入姓名" style="width: 200px" v-model="patient.realName"></el-input>
      <el-button type="info" @click="searchPatient">查询</el-button>
    </div>
    <el-divider></el-divider>
    <div style="font-size:20px;text-align:left">
      <i class="el-icon-document-checked">检查申请</i>
    </div>
    <el-divider></el-divider>
    
    <div style="display:flex;">
    <el-button type="primary" disabled icon="el-icon-price-tag">项目金额：{{calTotalPrice}}元</el-button>
    </div>
    <el-table :data="check_request_table" style="width:80%" @selection-change="checkSelectionChange" ref="check_table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="techCode" label="检查编码" width="180"></el-table-column>
        <el-table-column prop="techName" label="检查名称" ></el-table-column>
        <el-table-column prop="techFormat" label="检查规格" width="100"></el-table-column>
        <el-table-column prop="techPrice" label="单价" width="100"></el-table-column>
        <el-table-column prop="priceType" label="费用分类" width="100"></el-table-column>
        <el-table-column width="180">
<!--          <template slot="header" slot-scope="scope">-->
          <template #header>
            <el-button type="text" @click="deleteCheckRequest">删除</el-button>
            <el-button type="text" @click="checkDialogTableVisible=true">增加</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-descriptions title="医嘱" :column="1" border style="width:80%;margin-top:20px">
      <el-descriptions-item label="目的要求：" :labelStyle="{'width':'120px'}">
        <el-input type="textarea" :rows="4" v-model="checkRequests.checkInfo" placeholder="请输入检验目的要求"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="检验部位：" :labelStyle="{'width':'120px'}">
        <el-input type="textarea" :rows="2" v-model="checkRequests.checkPosition" placeholder="请输入检验部位"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="备注：" :labelStyle="{'width':'120px'}">
        <el-input type="textarea" :rows="4" v-model="checkRequests.checkRemark" placeholder="请输入检验事项"></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 检查项目选择对话框 -->
<!--    <el-dialog title="添加检查申请" :visible.sync="checkDialogTableVisible">-->
      <el-dialog title="添加检查申请" v-model="checkDialogTableVisible">
      <div>
        <el-tag style="width:20%">检查编码：</el-tag><el-input style="width:80%" v-model="checkRequest.techCode" placeholder="请输入检查编码"></el-input>
      </div>
      <div>
        <el-tag style="width:20%">检查名称：</el-tag><el-input style="width:80%" v-model="checkRequest.techName" placeholder="请输入检查名称"></el-input>
      </div>
      <div style="float:right">
        <el-button @click="searchCheck">搜索</el-button>
      </div>
      <el-table :data="search_check" @selection-change="checkSelectionChange" ref="dialog_check_table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="techCode" label="检查编码" width="150"></el-table-column>
        <el-table-column property="techName" label="检查名称" ></el-table-column>
        <el-table-column prop="techFormat" label="检查规格" width="100"></el-table-column>
        <el-table-column prop="techPrice" label="单价" width="100"></el-table-column>
        <el-table-column prop="priceType" label="费用分类" width="100"></el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="addSelectionCheck">添加</el-button>
        <el-button type="info" @click="checkDialogTableVisible=false">关闭</el-button>
      </div>
    </el-dialog>

    <el-divider></el-divider>
    <div style="text-align:left;margin-top:20px">
        <el-button type="primary" @click="addCheckRequest">申请提交</el-button>
        <el-button type="primary" @click="clearCheckRequest()">清空表格</el-button>
    </div>
    
  </div>
</template>
<script>
import {isNullMessage} from "../../../util/util"
import qs from 'qs'
import {ElMessage} from "element-plus";
import {getSessionStorage} from "@/util/common";
export default {
  data(){
    return{
      submit_check_info:{},//保存提交信息
      checkRequests:{
        checkInfo:'',
        checkPosition:'',
        checkRemark:'',
        registerId:0,
        caseNumber:0,
        medicalTechnologyId:0,
        creationTime:'2000-09-09',
        checkState:'已开立'
      },
      // total_price:0,//申请检查项目总金额(没有用)，用计算属性实现
      temp_check:[], //临时保存对象数组
      checkDialogTableVisible:false,//设置检查项目选择对话框是否显示
      patient:{}, //患者信息
      check_request_table:[],//检查申请项
      checkRequest:{},//检查项目选择对话框提交搜索数据
      search_check:[],//table的检查数据
    }    
  },
  methods:{

    //查询医疗项目
    searchCheck:function ()
    {

      let url='http://localhost:8092/medicaltechnology/select'
      this.$axios.post(url,this.checkRequest).then(resp=>{
        this.search_check=resp.data.result;
      })
    },
    //对话框选择的医疗项目和页面选择的医疗项目
    checkSelectionChange:function (rows){
      this.temp_check=rows

    },
    //对话框选择医疗项目添加
    addSelectionCheck:function(){
      this.checkDialogTableVisible=false
      this.check_request_table=this.temp_check
      //清除复选框选中
      this.$refs.dialog_check_table.clearSelection()
    },

    //删除已选择的医疗项目
    deleteCheckRequest:function ()
    {
      //this.$refs.check_table.clearSelection()
       if(confirm("真的删除？"))
       {
         this.temp_check.forEach(item=>{
          let i= this.$refs.check_table.data.indexOf(item)
           this.$refs.check_table.data.splice(i,1)
         })
         //
       }
    },

    //查询患者
    searchPatient:function ()
    {

       let url='http://localhost:8092/register/selectpatient'
        this.$axios.post(url,this.patient).then(resp=>{
          this.patient=resp.data.result;
        })
    },

    //保存检查申请
    addCheckRequest:function ()
    {


      if(this.temp_check.length>1 ||this.temp_check.length==0)
      {
        ElMessage({
          type:'error',
          message:'一次只能申请检查项目为1项'
        })
        return
      }
      this.checkRequests.registerId=this.patient.id
      this.checkRequests.medicalTechnologyId=this.temp_check[0].id
      this.checkRequests.caseNumber=this.patient.caseNumber
      this.checkRequests.caseNumber=this.patient.caseNumber
      let url='http://localhost:8092/checkrequest/insert'
      this.$axios.post(url,this.checkRequests).then(resp=>{
        ElMessage({
          type:'success',
          message:'申请查检成功'
        })

        //清空
        this.check_request_table=[]
        this.checkRequests.checkPosition=''
        this.checkRequests.checkRemark=''
        this.checkRequests.checkInfo=''
      })
    },
  },
  computed:{
    //计算属性:直接当属性使用
    calTotalPrice:function ()
    {
      if(this.check_request_table.length>0)
      {
        //es6中map,fiter,reduce
        return  this.check_request_table.reduce((total,item)=>total+item.techPrice,0)
      }
      else
      {
        return 0
      }

    }
  },
  mounted() {
    if(getSessionStorage("patient")==null)
    {
      ElMessage({
        type:"warning",
        message:'请选择患者！'
      })
      return
    }
    this.patient=getSessionStorage("patient")
  }
}
</script>
